// 选择设备

<template>
    <div @touchmove.prevent>
        <van-popup
            v-model="visible"
            position="bottom"
            class="popup-bg"
            get-container="body"
            :style="{ height: '100%', background: '#F4F6F9' }"
            :lock-scroll="false"
        >
            <f7-page>
                <f7-navbar>
                    <f7-nav-left>
                        <f7-link
                            @click="fnColse"
                            icon-material="chevron_left"
                            force
                        ></f7-link>
                    </f7-nav-left>
                    <f7-nav-title>选择设备</f7-nav-title>
                    <f7-nav-right> </f7-nav-right>
                </f7-navbar>
                <div class="search-box">
                    <van-search
                        v-model="propertyCode"
                        @search="searchQuery"
                        @clear="reset"
                        shape="round"
                        background="#1990ff"
                        placeholder="产权备案编号、工程名称"
                        show-action
                    >
                        <template #action>
                            <div @click="searchQuery" class="search-bar-btn">搜索</div>
                        </template>
                    </van-search>
                </div>
                <div class="radio-list">
                    <van-list
                        class="search-list"
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="dataQuery"
                        v-if="query.data.length > 0"
                    >
                        <van-radio-group v-model="result">
                            <li
                                v-for="(item, index) in query.data"
                                :key="index"
                                @click="toggle(item)"
                            >
                                <van-radio :name="item.notifyId"></van-radio>
                                <div class="search-list-item">
                                    <div class="right-box">
                                        <div class="total-top">
                                            <span class="code">{{
                                                item.propertyCode
                                            }}</span>
                                        </div>
                                        <div class="total-bottom">
                                            <div class="name-box">
                                                <span
                                                    >设备类型：<span
                                                        class="value"
                                                        v-if="
                                                            equipmentTypeList.length >
                                                            0
                                                        "
                                                        >{{
                                                            item.equipmentType
                                                                | DictItem(
                                                                    equipmentTypeList
                                                                )
                                                        }}</span
                                                    ></span
                                                >
                                            </div>
                                            <div class="name-box">
                                                <span
                                                    >用于工程：<span
                                                        class="value"
                                                        >{{
                                                            item.engineeName
                                                        }}</span
                                                    ></span
                                                >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </van-radio-group>
                    </van-list>
                    <v-empty v-else description="暂无数据" />
                </div>
                <f7-toolbar position="bottom" no-shadow class="fff">
                    <f7-button fill class="submit-btn" @click="fnSave()"
                        >提交</f7-button
                    >
                </f7-toolbar>
            </f7-page>
        </van-popup>
    </div>
</template>

<script>
export default {
    name: 'v-popup-person',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        url: {
            type: String,
        },
        equipmentTypeList: { type: Array, default: () => [] },
        // 操作后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        visible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    data() {
        return {
            propertyCode: '',
            result: null,
            query: {
                data: [],
            },
            start: 0,
            length: 10,
            recordsTotal: null,
            loadFlag: true,
            selectItem: {},
            loading: false,
            finished: false,
        }
    },
    created() {
        this.searchQuery()
    },
    methods: {
        showTime1(date) {
            if (date) {
                return formatter.formatDate(date, 'yyyy-MM-dd')
            } else {
                return '--'
            }
        },
        searchQuery() {
            // 设置start为0，数组清空，然后才加载数据
            this.start = 0
            this.query.data = []
            this.loadData()
        },
        reset() {
            this.propertyCode = ''
            this.start = 0
            this.query.data = []
            this.loadData()
        },
        dataQuery() {
            if (this.loadFlag) {
                if (
                    this.recordsTotal &&
                    this.query.data.length >= this.recordsTotal
                ) {
                    this.finished = true
                } else {
                    this.loadFlag = false
                    this.loadData()
                }
            }
        },
        loadData(rqurl = this.url) {
            let self = this
            if (rqurl) {
                let params = {
                    start: self.start,
                    length: self.length,
                    query: {
                        propertyCode: self.propertyCode,
                    },
                }
                self.$f7.preloader.show()
                self.$f7.request.postJSON(
                    rqurl,
                    params,
                    (r) => {
                        self.$f7.preloader.hide()
                        self.loading = false
                        if (r) {
                            if (_.isArray(r.data)) {
                                _.each(r.data, (item) => {
                                    self.query.data.push(item)
                                })
                                self.start += self.length
                                self.recordsTotal = r.recordsTotal
                                self.$emit('onAfterQuery', self.query.data)
                            }
                        }
                        self.loadFlag = true
                    },
                    (r) => {
                        self.loadFlag = true
                    }
                )
            }
        },
        // 关闭组件
        fnColse() {
            this.visible = false
        },
        // 提交
        fnSave() {
            this.autoClose && this.fnColse()
            this.$emit('save', this.selectItem)
            this.result = null
        },
        toggle(item) {
            this.result = item.notifyId
            this.selectItem = item
        },
    },
}
</script>
<style lang="less" scoped>
@import url('../../../../../assets/css/commonSelect.less');
.popup-bg .radio-list {
    padding: 10px 0;
}
</style>
